<template>
  <el-card class="card">
    <el-container>
      <!--头部区域-->
      <el-header class="headers">
        <!--左边区域-->
        <div>
          <span class="keyWord">关键字</span>
          <el-input
            class="qwe"
            v-model="queryInfo.keyword"
            clearable
            @clear="getrandomsList"
             placeholder="请输入编号"
             @change="inputChange"
          ></el-input>
        </div>
        <!--右边区域-->
        <div>
          <el-button @click="cleanRandoms">清除</el-button>
          <el-button type="primary" @click="searchList">搜索</el-button>
        </div>
      </el-header>
      <!--内容主体区域-->
      <el-main>
        <el-row>
          <el-col>
            <!--警告区域-->
            <el-alert
              :title="`数据一共${counts}条`"
              type="info"
              show-icon
              :closable="false"
            ></el-alert>
          </el-col>
        </el-row>
        <!--表格区域-->
        <el-table style="width: 100%" border stripe :data="randomsList">
          <el-table-column
            label="编号"
            align="center"
            prop="id"
            width="190"
          ></el-table-column>
          <el-table-column label="题型" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.questionType === '3'">简答</span>
              <span v-else-if="scope.row.questionType === '1'">多选</span>
              <span v-else>单选</span>
            </template>
          </el-table-column>
          <el-table-column label="题目编号" align="center" width="190">
            <template slot-scope="scope">
              <a
                href="javascript:;"
                v-for="(item, index) in scope.row.questionIDs"
                :key="index"
                class="spanColor"
                style="display: block"
                @click="showTiKuVisible(item)"
                >{{ item.number }}</a
              >
            </template>
          </el-table-column>
          <el-table-column
            label="录入时间"
            align="center"
            prop="addTime"
            width="190"
          ></el-table-column>
          <el-table-column
            label="答题时间(s)"
            align="center"
            prop="totalSeconds"
          ></el-table-column>
          <el-table-column
            label="正确率(%)"
            align="center"
            prop="accuracyRate"
          ></el-table-column>
          <el-table-column
            label="录入人"
            align="center"
            prop="userName"
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                plain
                circle
                @click="delRandoms(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-pagination
            background
            :page-sizes="[10, 14, 16, 20]"
            :page-size="queryInfo.pagesize"
            layout="prev, pager, sizes,next,jumper"
            :total="counts"
            :current-page="queryInfo.page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </el-row>
      </el-main>
    </el-container>

    <el-dialog
      title="题目预览"
      :visible.sync="tikuVisible"
      width="60%"
      @close="close"
    >
      <el-row :gutter="24" class="timuyulan">
        <el-col :span="5" v-if="titleList.questionType === '1'"
          >【题型】: 单选</el-col
        >
        <el-col :span="5" v-else-if="titleList.questionType === '2'"
          >【题型】: 多选</el-col
        >
        <el-col :span="5" v-else>【题型】: 简答</el-col>
        <el-col :span="5" :offset="1">【编号】: {{ titleList.id }}</el-col>
        <el-col :span="5" :offset="1" v-if="titleList.difficulty === '1'"
          >【难度】: 简单</el-col
        >
        <el-col :span="5" :offset="1" v-else-if="titleList.difficulty === '2'"
          >【难度】: 适中</el-col
        >
        <el-col :span="5" :offset="1" v-else>【难度】:困难</el-col>
        <el-col :span="5" :offset="1">【便签】: {{ titleList.tags }}</el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="5">【学科】: {{ titleList.subjectName }}</el-col>
        <el-col :span="5" :offset="1"
          >【目录】: {{ titleList.directoryName }}</el-col
        >
        <el-col :span="5" :offset="1"
          >【方向】: {{ titleList.direction }}</el-col
        >
      </el-row>
      <el-row style="margin-top: 40px">
        <el-col style="color: #dcdfe6"
          >————————————————————————————————————————————————————————————</el-col
        >
      </el-row>
      <el-row>
        <el-col style="margin-bottom: 10px">【题干】:</el-col>
        <el-col style="margin-bottom: 15px">
          <span v-html="titleList.question"></span>
        </el-col>
        <el-col
          v-if="titleList.questionType === '1'"
          style="margin-bottom: 15px"
          ><strong>此题为 单选题 以下为正确答案</strong></el-col
        >
        <el-col
          v-else-if="titleList.questionType === '2'"
          style="margin-bottom: 15px"
          ><strong>此题为 多选题 以下为正确答案</strong></el-col
        >
        <el-col v-else style="margin-bottom: 15px"
          ><strong>此题为 简答题 以下为正确答案</strong></el-col
        >
        <el-col>
          <!--单选框-->
          <div v-if="titleList.questionType === '1'">
            <div v-for="(item, index) in titleList.options" :key="index">
              <el-radio :value="item.isRight" :label="1">{{
                item.code + item.title
              }}</el-radio>
            </div>
          </div>
          <!--多选题复选框-->
          <div v-else-if="titleList.questionType === '2'">
            <div v-for="(item, index) in titleList.options" :key="index">
              <el-checkbox
                :checked="item.isRight == 1 ? true : false"
                :disabled="item.isRight == 0 ? true : false"
                >{{ item.code + item.title }}</el-checkbox
              >
            </div>
          </div>
        </el-col>
        <el-col class="fengexian"
          >————————————————————————————————————————————————————————————</el-col
        >
      </el-row>
      <el-row>
        <el-col>
          <span>【参考答案】:</span>
          <el-button
            type="danger"
            style="margin-left: 10px"
            @click="preivewVideo"
            >视频答案预览</el-button
          >
          <div v-show="play" class="player-container">
            <video
              :src="titleList.videoURL"
              controls
              ref="video"
              class="player-container"
            ></video>
          </div>
        </el-col>
        <el-col class="fengexian_"
          >————————————————————————————————————————————————————————————</el-col
        >
      </el-row>
      <el-row>
        <el-col>
          <span>【答案解析】:</span>
          <div v-html="titleList.answer" style="color: red"></div>
        </el-col>
        <el-col class="fengexian"
          >————————————————————————————————————————————————————————————</el-col
        >
      </el-row>
      <el-row>
        <el-col>
          <span>【题目备注】:</span>
          <span style="margin-left: 10px">{{ titleList.remarks }}</span>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tikuVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { randoms, removeRandoms, detail } from "@/api/hmmm/questions.js";
export default {
  data() {
    return {
      queryInfo: {
        keyword: "",
        page: 1,
        pagesize: 20,
      },
      randomsList: [],
      counts: 1,
      tikuVisible: false,
      titleList: [],
      videoURL: "",
      play: false,
    };
  },
  methods: {
    // 获取组题列表数据
    async getrandomsList() {
      const { data } = await randoms(this.queryInfo);
      console.log(data);
      this.randomsList = data.items;
      this.counts = data.counts;
    },
    // 一页显示多少条发生变化后
    handleSizeChange(val) {
      this.queryInfo.pagesize = val;
      this.queryInfo.page = 1;
      this.getrandomsList();
    },
    // 当前显示第几页发生变化后
    handleCurrentChange(val) {
      this.queryInfo.page = val;
      this.getrandomsList();
    },
    // 点击清除按钮的操作
    cleanRandoms() {
      this.queryInfo.keyword = "";
      this.getrandomsList();
    },
    // 搜索功能
    searchList() {
      // this.queryInfo.page = 1;
      this.getrandomsList();
    },
    // 删除列表操作
    async delRandoms(row) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("取消了这次删除");
      }
      await removeRandoms(row)
        .then(() => {
          this.$message.success("删除成功");
          this.getrandomsList();
        })
        .catch((err) => {
          this.$message.errer("发生了错误");
        });
    },
    // 点击编号弹出对话框
    async showTiKuVisible(row) {
      this.tikuVisible = true;
      const { data } = await detail(row);
      this.titleList = data;
      this.videoURL = data.videoURL;
      console.log(this.videoURL);
      console.log(this.titleList);
    },
    // 点击按钮切换视频窗口是否打开并且播放视频
    preivewVideo() {
      this.play = !this.play;
      this.$refs.video.play();
    },
    // 对话框关闭时停止播放,并且关闭视频播放，让时间重回0
    close() {
      this.play = false;
      this.$refs.video.pause();
      this.$refs.video.currentTime = 0;
    },
    inputChange(){
        this.queryInfo.page = 1
        this.getrandomsList()
    }
  },
  mounted() {
    this.getrandomsList();
  },
  computed: {},
};
</script>

<style scoped lang="less">
.headers {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
}
.keyWord {
  margin-left: 20px;
}
.qwe {
  width: 300px;
  margin-left: 10px;
}
.card {
  margin-top: 10px;
  margin-left: 10px;
}
.el-main {
  padding: 0;
}
.el-row {
  margin-bottom: 15px;
}
.spanColor {
  color: #0099ff;
}
.el-table {
  margin-bottom: 20px;
}
.timuyulan {
  margin-bottom: 60px;
}
.fengexian {
  color: #dcdfe6;
  margin-bottom: 18px;
}
.player-container {
  height: 200px;
  margin-top: 10px;
  margin-bottom: 18px;
}
.fengexian_ {
  margin-top: 20px;
  color: #dcdfe6;
}
</style>
